﻿{% extends "base.html" %}



{% block css %}
<link rel="stylesheet" href="/static/css/admin.css">
<link rel="stylesheet" href="/static/ztree3/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
{% endblock %}


{% block center %}


<!--头部导航-->
<div class="panel panel-default center-top" style="min-width:1300px;">
  <div class="panel-body">
    <ol class="breadcrumb" style="margin-bottom: 0px;background-color: #FFFFFF;">
      <li><a href="/" style="color: #377CD8;">首页</a></li>
      <li><a href="#">后台管理</a></li>
      <li class="active">{{ title }}</li>
    </ol>
  </div>
</div>



<!--用户信息-->
<div class="panel panel-default center-top" style="min-width:1300px;">
  <div class="panel-heading">
      <div class="row" style="padding-top:5px;padding-left:10px;">
          <div class="col-sm-6">

              <a href="#" class="btn btn-sm btn-success" data-toggle="modal" data-target="#roleModal"> 添加角色 </a>

          </div>
      </div>

  </div>
  <div class="panel-body">


        <div style="margin-bottom: 10px;">

            <div class="col-sm-12">
                <table class="table table-hover table-bordered">
                  <thead>
                    <tr style="background-color: #f5f5f5;">

                      <th>角色</th>
                      <th>描述</th>
                      <th>授权</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>

                  {% for role in role_list %}
                    <tr>

                      <td>{{ role.role_title }}</td>
                      <td>{{ role.role_msg }}</td>
                      <td><a href="#" style="text-decoration:none;" name="roleperms" role_id="{{ role.role_id }}">授权</a></td>
                      <td style="padding-left:5px;">

                        <a href="#" style="text-decoration:none;" name="edit-role" role_id="{{ role.role_id }}" data-toggle="tooltip" data-placement="left" title="修改"><span class="fa fa-pencil"></span> </a>&nbsp;&nbsp;&nbsp;

                        <a href="#" style="text-decoration:none;" name="del-role" role_id="{{ role.role_id }}" data-toggle="tooltip" data-placement="right" title="删除"><span class="fa fa-trash"></span> </a>

                      </td>
                    </tr>
                  {% endfor %}
                  </tbody>
                </table>


            </div>

        </div>
  </div>
</div>


{% endblock %}


<!-- Modal -->
{% block modal %}

<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:135px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="roleModalLabel">添加角色</h4>
      </div>
      <div class="modal-body">

         <form>
          <div class="form-group">
            <label >角色名称</label>
            <input  class="form-control"  placeholder="角色名称" id="role-title">
          </div>
          <div class="form-group">
            <label >描述</label>
            <input  class="form-control"  placeholder="描述" id="role-msg">
          </div>


          <div class="form-group" style="display:none" id="pmenu-div">
            <label >父节点</label>
              <select class="form-control" id="pmenu-id">
                  {% for menu in menu_info %}
                  <option value="{{ menu.menu_id }}">{{ menu.menu_title }}</option>
                  {% endfor %}
              </select>
          </div>

        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="sub-role">提交</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="edit-roleModal" tabindex="-1" role="dialog" aria-labelledby="edit-roleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:135px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="edit-roleModalLabel">添加角色</h4>
      </div>
      <div class="modal-body">

         <form>
          <div class="form-group">
            <label >角色名称</label>
            <input  class="form-control"  placeholder="角色名称" id="edit-role-title">
          </div>
          <div class="form-group">
            <label >描述</label>
            <input  class="form-control"  placeholder="描述" id="edit-role-msg">
          </div>


          <div class="form-group" style="display:none" id="edit-pmenu-div">
            <label >父节点</label>
              <select class="form-control" id="edit-pmenu-id">
                  {% for menu in menu_info %}
                  <option value="{{ menu.menu_id }}">{{ menu.menu_title }}</option>
                  {% endfor %}
              </select>
          </div>

        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="sub-edit-role">提交</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="edit-rolepermsModal" tabindex="-1" role="dialog" aria-labelledby="edit-rolepermsModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:135px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="edit-rolepermsModalLabel">角色授权</h4>
      </div>
      <div class="modal-body" style="max-height:500px;overflow:auto;">
        <ul id="treeperms" class="ztree"></ul>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="sub-edit-roleperms">提交</button>
      </div>
    </div>
  </div>
</div>


{% endblock  %}

{% block js %}
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" src="/static/js/rbac.js"></script>

    <script type="text/javascript" >
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })


    //授权

    $(document).ready(function(){
        $('td a[name="roleperms"]').click(function(){
            var role_id = $(this).attr("role_id");

            $.post("/rbac/roleperms/",{'role_id':role_id},function(data){
            if (data == "权限不足"){
                alert("权限不足，请联系管理员！");
                }else{


                var info = eval('(' + data + ')');

                   var setting = {
                    view: {
                        addHoverDom: false,
                        removeHoverDom: false,
                        selectedMulti: false,
                        },
                        check: {
                            enable: true
                        },
                        data: {
                            simpleData: {
                                enable: true
                            }
                        },
                        edit: {
                            enable: false
                        }
                    };
                var zNodes =info;




                $.fn.zTree.init($("#treeperms"), setting, zNodes);


                $("#sub-edit-roleperms").attr('role_id',role_id);


                $("#edit-rolepermsModal").modal('show');
                }
            });
        });

    });


    //角色授权
    $("#sub-edit-roleperms").click(function(){
        var role_id = $(this).attr("role_id");
        var treeObj=$.fn.zTree.getZTreeObj("treeperms");

        var nodes = treeObj.getCheckedNodes(true);

        var node_ids =new Array();
        for(var i=0;i<nodes.length;i++){

           node_ids[i] = nodes[i].id;
        }
        node_id_json = JSON.stringify(node_ids)
        $.post("/rbac/addroleperms/",{'node_id_json':node_id_json,'role_id':role_id},function(data){
        if (data == "权限不足"){
            alert("权限不足，请联系管理员！");
        }else{

            alert(data);

            if (data == "权限已更新"){
                location.reload();
            }
            }
        });
    });





    </script>

{% endblock %}


